<template>
  <view class="container">
    <view class="bg"></view>
    <view :style="'height:'+statusBarHeight+'px;'">
    </view>
    <view class="nav flex-center-center">
      <image @click="back" class="nav-icon" src="/static/images/my/nav-icon.png" mode=""></image>
      <text>提现</text>
    </view>
    <view class="allMoney">
      <text class="allMoney-top">可以提现金额（元）</text>
      <view class="allMoney-bottom">
        <text class="symbol">￥</text><text class="">{{allMoney}}</text>
      </view>
    </view>
    <view class="operate">
      <text class="title">
        提现金额
      </text>
      <view class="inputBox flex-center-between">
        <text class="inputBox-symbol">￥</text>
        <u-input class="input" min="" :customStyle="defaultStyle" placeholder="输入提现金额" v-model="form.money" type="number" :border="border" clearable></u-input>
      </view>
      <view class="paymentCode">
        <text class="title">
          上传收款码
        </text>

        <view class="uploadBox1">
          <u-upload width="200" :max-count="1" height="200" :action="action" upload-text="上传图片" :file-list="fileList" @on-remove="onRemove" @on-success="onsSuccess">

          </u-upload>
        </view>

        <!-- <view @click="uploadCode" class="uploadBox flex-center-center">
          <image v-if="!form.codeImage" class="upload-icon " src="/static/images/my/upload-icon.png" mode="">
          </image>
          <text v-if="!form.codeImage">上传</text>
          <image v-if="form.codeImage" class="codeImage" :src="form.codeImage" mode=""></image>
        </view> -->
      </view>
    </view>
    <view @click="onSubmit" :class="{'active':isSubmit}" class="btn flex-center-center">
      提现
    </view>

    <xModal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </xModal>
  </view>
</template>

<script>

import config from '@/js/config.js';
import uploadFile from '@/js/uploadFile.js';
import api from '@/api/index.js';
import xModal from '../../../components/x-modal/x-modal.vue';
export default {
  components: {
    xModal
  },
  data() {
    return {
      isSubmit: false,
      money: '',
      allMoney: 0,
      border: false,
      contractObj: {
        title: '失败原因',
        content: '由于您发布虚假信息，账号已被封停3天预计解封时间为：2023年9月1日18时35分如有疑问请联系管理员',
        isShow: false,
        showBotton: false,
        cancelText: '取消',
        confirmText: '确认',
        showOneBotton: true
      },
      defaultStyle: {
        'height': '86rpx',
        'line-height': '73rpx',
        'font-family': 'PingFang SC-Medium, PingFang SC',
        'font-weight': '500',
        'color': '#333333',
        'font-size': '62rpx'
      },
      statusBarHeight: uni.getStorageSync('statusBarHeight'),
      subFlag: true,
      form: {
        money: "",
        put_image: "",
        codeImage: ''
      },
      userinfo: {},
      isCanRequest: true,
      action: `${config.reqUrl}/api/common/upload`,
      fileList: []
    }
  },
  computed: {
    isSubmit() {
      return Number(this.form.money) && (Number(this.allMoney) >= Number(this.form.money));
    }
  },
  onShow() {
    this.getMyInfo()
  },
  methods: {
    setIsRequestFlag() {
      if (this.isCanRequest) {
        this.isCanRequest = false
        setTimeout(() => {
          this.isCanRequest = true
        }, 5000)
        return true
      } else {
        return false
      }
    },
    getMyInfo() {
      api.base.getMyInfo().then(res => {
        if (res.code == 1) {
          this.userinfo = res.data
          this.allMoney = this.userinfo.balance
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    back() {
      uni.navigateBack();
    },
    uploadCode() {
      let that = this
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: function (res) {

          console.log(JSON.stringify(res.tempFilePaths));
          console.log(res.tempFilePaths[0])
          that.form.codeImage = res.tempFilePaths[0];
          // that.form.put_image = res.tempFilePaths[0];
          uploadFile(res.tempFilePaths[0]).then(res => {
            that.form.put_image = res.url
            // that.changeProfile({ avatar: res.url })
          });

        }
      });
    },
    onSubmit() {

      let flag = Number(this.form.money) && (Number(this.allMoney) >= Number(this.form.money));
      if (1000 < Number(this.form.money) || Number(this.form.money) < 0) {
        uni.showToast({
          title: '金额请输入0.01～1000',
          icon: 'none'
        });
        return
      }
      if (this.fileList.length == 0) {
        uni.showToast({
          title: '请上传收款码',
          icon: 'none'
        });
        return
      }
      this.form.put_image = this.fileList[0].url
      if (flag && this.subFlag) {
        this.subFlag = false;
        console.log('提现')
        let flag = this.setIsRequestFlag()
        if (!flag) {
          console.log('不让请求')
          return
        } else {
          api.base.getWithdraw(this.form).then(res => {
            if (res.code == 1) {
              uni.$u.toast(res.msg)
              this.subFlag = true;
              setTimeout(() => {
                uni.navigateBack();
              }, 1000)
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          });
        }

      }
    },
    cancel() {
      this.contractObj.isShow = false
    },
    confirm() {
      this.contractObj.isShow = false
    },
    onRemove(index, lists) {
      console.log('删除')
      this.fileList.splice(index, 1)
      // this.imgNum--
    },
    onsSuccess(data, index, lists, name) {
      this.fileList.push({
        url: data.data.url
      })

      //   this.imgNum++
    },

  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    width: 750rpx;
    height: 588rpx;
    background: linear-gradient(135deg, #ff7c7c 0%, #cb62bd 50%, #9747ff 100%);
  }

  .allMoney {
    margin-top: 24rpx;
    margin-left: 32rpx;

    &-top {
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 33rpx;
    }

    &-bottom {
      height: 70rpx;
      margin-top: 16rpx;
      font-size: 60rpx;
      font-family: HarmonyOS Sans-Bold, HarmonyOS Sans;
      font-weight: bold;
      color: #ffffff;

      .symbol {
        font-size: 36rpx;
        font-family: HarmonyOS Sans-Bold, HarmonyOS Sans;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }

  .operate {
    width: 686rpx;
    height: 514rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    padding: 24rpx 34rpx;
    box-sizing: border-box;

    .title {
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 33rpx;
    }

    .inputBox {
      width: 638rpx;
      height: 134rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border-bottom: 1rpx solid #e6e6e6;
      margin: 24rpx 0;

      &-symbol {
        height: 86rpx;
        font-size: 62rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ff2544;
        line-height: 73rpx;
        display: flex;
        align-items: flex-end;
      }

      .input {
        width: 100%;
      }
    }

    .paymentCode {
      .uploadBox {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        top: 24rpx;
        background: #f5f5f5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        flex-direction: column;

        .codeImage {
          width: 160rpx;
          height: 160rpx;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
        }
        .upload-icon {
          width: 48rpx;
          height: 48rpx;
        }

        text {
          height: 28rpx;
          margin-top: 6rpx;
          font-size: 20rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 28rpx;
        }
      }
    }
  }

  .btn {
    position: relative;
    top: 80rpx;
    width: 622rpx;
    height: 88rpx;
    background: #6d0cf7;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    opacity: 0.5;
    margin: 0 auto;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }

  .active {
    opacity: 1;
  }
}
</style>